<template>
  <div class="main-container">
    <el-menu
      class="nav-menu"
      :default-active="activeMenu"
      @select="handleMenuSelect"
      :collapse="true"
    >
      <el-menu-item index="server">
        <el-icon><Monitor /></el-icon>
        <template #title>设备</template>
      </el-menu-item>
      <el-menu-item index="optical">
        <el-icon><Connection /></el-icon>
        <template #title>光模块</template>
      </el-menu-item>
    </el-menu>
    <div class="content-container">
      <div v-if="activeMenu === 'server'" class="server-list">
        <div class="search-bar">
          <div class="page-title">设备</div>
          <el-input
            v-model="searchQuery"
            placeholder="搜索IP、设备名称、位置、资产编号、RFID或用户卡"
            class="search-input"
            clearable
            @input="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="showCreateDialog">
            <el-icon><Plus /></el-icon>设备
          </el-button>
        </div>
        <div class="table-container">
          <el-table
            :data="filteredServers"
            style="width: 100%"
            height="calc(100vh - 180px)"
            :border="false"
          >
            <el-table-column prop="id" label="ID" min-width="60" />
            <el-table-column prop="ip" label="IP地址" min-width="120">
              <template #default="{ row }">
                <el-button link type="primary" @click="showDetailDialog(row)">
                  {{ row.ip }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="dev_type" label="设备类型" min-width="100" />
            <el-table-column prop="dev_name" label="设备名称" min-width="120" />
            <el-table-column prop="status" label="状态" min-width="80">
              <template #default="{ row }">
                <el-tag :type="row.status === 'online' ? 'success' : 'danger'">
                  {{ row.status === 'online' ? '在线' : '离线' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="当前用户" min-width="120">
              <template #default="{ row }">
                {{ [...new Set(row.user_cards.map((card: UserCard) => card.name))].join(', ') || '无' }}
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" min-width="150" />
            <el-table-column label="操作" min-width="120" fixed="right">
              <template #default="{ row }">
                <el-button-group>
                  <el-button 
                    type="success" 
                    size="small" 
                    @click="handleConnect(row)"
                    :loading="connectingIds.includes(row.id)"
                    :disabled="connectingIds.includes(row.id)"
                  >
                    <el-icon><Connection /></el-icon>
                  </el-button>
                  <el-button type="primary" size="small" @click="handleEdit(row)">
                    <el-icon><Edit /></el-icon>
                  </el-button>
                  <el-button type="danger" size="small" @click="handleDelete(row)">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
          <div class="table-footer">
            <span>设备总数：{{ filteredServers.length }}</span>
            <span class="ml-4">在线设备：{{ filteredServers.filter(server => server.status === 'online').length }}</span>
          </div>
        </div>

        <!-- 详情对话框 -->
        <el-dialog
          v-model="detailDialogVisible"
          title="设备详情"
          :width="isMobile ? '95%' : '80%'"
          :fullscreen="isMobile"
          class="detail-dialog"
        >
          <div class="device-detail-custom">
            <div class="update-time">更新于 {{ formatDateTime(currentServer?.update_time || '') }}</div>
            <el-form label-width="120px" class="detail-form">
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="IP地址"><span class="detail-content">{{ currentServer?.ip }}</span></el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="用户名"><span class="detail-content">{{ currentServer?.user_name }}</span></el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="密码"><span class="detail-content">******</span></el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="设备类型"><span class="detail-content">{{ currentServer?.dev_type }}</span></el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="设备名称"><span class="detail-content">{{ currentServer?.dev_name }}</span></el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="状态">
                    <el-tag :type="currentServer?.status === 'online' ? 'success' : 'danger'">
                      {{ currentServer?.status === 'online' ? '在线' : '离线' }}
                    </el-tag>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="位置"><span class="detail-content">{{ currentServer?.location }}</span></el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="机房"><span class="detail-content">{{ currentServer?.server_room }}</span></el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="机架"><span class="detail-content">{{ currentServer?.server_rack }}</span></el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="U位"><span class="detail-content">{{ currentServer?.pos_u }}</span></el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="资产编号"><span class="detail-content">{{ currentServer?.asset_number }}</span></el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="序列号"><span class="detail-content">{{ currentServer?.serial_number }}</span></el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="RFID"><span class="detail-content">{{ currentServer?.rfid }}</span></el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="用户卡">
                <template v-if="currentServer?.user_cards && currentServer.user_cards.length > 0">
                  <div v-for="card in currentServer.user_cards" :key="card.name" style="margin-bottom: 4px;">
                    <span class="detail-content detail-content-wrap">{{ card.name }}，卡号：{{ card.cards.map(num => `卡${num}`).join('，') }}，用途: {{ card.reason }}</span>
                  </div>
                </template>
                <span v-else>无</span>
              </el-form-item>
              <el-form-item label="光模块序列号">
                <template v-if="currentServer?.optical_module_serials && currentServer.optical_module_serials.length > 0">
                  <el-tag v-for="serial in currentServer.optical_module_serials" :key="serial" class="mx-1">
                    {{ serial }}
                  </el-tag>
                </template>
                <span v-else>无</span>
              </el-form-item>
              <el-form-item label="备注"><span class="detail-content detail-content-wrap">{{ currentServer?.remark || '无' }}</span></el-form-item>
            </el-form>
          </div>
        </el-dialog>

        <!-- 创建/编辑对话框 -->
        <el-dialog
          v-model="dialogVisible"
          :title="isEdit ? '编辑设备' : '添加设备'"
          width="80%"
          :fullscreen="isMobile"
        >
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
          >
            <el-form-item label="IP地址" prop="ip">
              <el-input v-model="form.ip" :disabled="isEdit" style="width: 200px" />
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用户名" prop="user_name">
                  <el-input v-model="form.user_name" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="密码" prop="password">
                  <el-input
                    v-model="form.password"
                    :type="showPassword ? 'text' : 'password'"
                  >
                    <template #append>
                      <el-button @click="showPassword = !showPassword">
                        <el-icon>
                          <component :is="showPassword ? 'Hide' : 'View'" />
                        </el-icon>
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="设备类型" prop="dev_type">
                  <el-select v-model="form.dev_type" style="width: 100%">
                    <el-option label="Ascend" value="Ascend" />
                    <el-option label="Switch" value="Switch" />
                    <el-option label="TaiShan" value="TaiShan" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备名称" prop="dev_name">
                  <el-input v-model="form.dev_name" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="位置" prop="location">
                  <el-select v-model="form.location" style="width: 100%">
                    <el-option label="青浦" value="青浦" />
                    <el-option label="团泊洼" value="团泊洼" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="机房" prop="server_room">
                  <el-input v-model="form.server_room" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="机架" prop="server_rack">
                  <el-input v-model="form.server_rack" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="U位" prop="pos_u">
                  <el-input v-model="form.pos_u" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="资产编号" prop="asset_number">
                  <el-input v-model="form.asset_number" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="序列号" prop="serial_number">
                  <el-input v-model="form.serial_number" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="RFID" prop="rfid">
                  <el-input v-model="form.rfid" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" />
            </el-form-item>

            <!-- 用户卡表单 -->
            <template v-if="showCardForm">
              <el-divider>用户卡</el-divider>
              <div class="card-form">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="使用人" required>
                      <el-input v-model="cardForm.name" placeholder="请输入使用人名称" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="卡号" required>
                      <el-select
                        v-model="cardForm.cards"
                        multiple
                        placeholder="请选择卡号"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="option in availableCardOptions"
                          :key="option.value"
                          :label="option.label"
                          :value="option.value"
                          :disabled="option.disabled"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="用途" required>
                      <el-input v-model="cardForm.reason" placeholder="请输入用途" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-button type="primary" circle @click="addCardUsage">
                  <el-icon><Plus /></el-icon>
                </el-button>
              </div>

              <!-- 已添加的用户卡列表 -->
              <div v-if="cardList.length > 0" class="card-list">
                <el-table :data="cardList" style="width: 100%; margin-top: 20px">
                  <el-table-column prop="name" label="使用人" />
                  <el-table-column prop="cards" label="卡号">
                    <template #default="{ row }">
                      {{ row.cards.map(num => `卡${num}`).join(', ') }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="reason" label="用途" />
                  <el-table-column label="操作" width="80">
                    <template #default="{ $index }">
                      <el-button type="danger" circle @click="removeCardUsage($index)">
                        <el-icon><Delete /></el-icon>
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="handleSubmit">确定</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
      <div v-else-if="activeMenu === 'optical'" class="optical-module-container">
        <OpticalModuleList />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { serverApi, type Server, type UserCard } from '../api/server'
import { Edit, Delete, Plus, Monitor, Connection, Search } from '@element-plus/icons-vue'
import OpticalModuleList from './OpticalModuleList.vue'
import axios from 'axios'
import { BASE_URL } from '../config/env'

const activeMenu = ref('server')

const handleMenuSelect = (index: string) => {
  activeMenu.value = index
}

const servers = ref<Server[]>([])
const searchQuery = ref('')
const dialogVisible = ref(false)
const detailDialogVisible = ref(false)
const isEdit = ref(false)
const showPassword = ref(false)
const formRef = ref()
const currentServer = ref<Server | null>(null)

// 检测是否为移动设备
const isMobile = computed(() => {
  return window.innerWidth <= 768
})

// 监听窗口大小变化
const handleResize = () => {
  window.addEventListener('resize', () => {
    isMobile.value = window.innerWidth <= 768
  })
}

const form = ref<Partial<Server>>({
  ip: '',
  user_name: '',
  password: '',
  dev_type: '',
  dev_name: '',
  server_room: '',
  server_rack: '',
  pos_u: '',
  location: '',
  asset_number: '',
  serial_number: '',
  rfid: '',
  user_cards: [],
  remark: ''
})

// 用户卡表单
const cardForm = ref<UserCard>({
  name: '',
  reason: '',
  cards: []
})

const showCardForm = computed(() => form.value.dev_type === 'Ascend')

const cardOptions = [
  { label: '卡0', value: 0 },
  { label: '卡1', value: 1 },
  { label: '卡2', value: 2 },
  { label: '卡3', value: 3 },
  { label: '卡4', value: 4 },
  { label: '卡5', value: 5 },
  { label: '卡6', value: 6 },
  { label: '卡7', value: 7 }
]

const cardList = ref<UserCard[]>([])

// 计算可用的卡号选项
const availableCardOptions = computed(() => {
  const usedCards = new Set(cardList.value.flatMap(card => card.cards))
  return cardOptions.map(option => ({
    ...option,
    disabled: usedCards.has(option.value)
  }))
})

const addCardUsage = () => {
  if (!cardForm.value.name || cardForm.value.cards.length === 0 || !cardForm.value.reason) {
    ElMessage.warning('请填写完整的用户卡信息')
    return
  }
  cardList.value.push({ ...cardForm.value })
  cardForm.value = {
    name: '',
    reason: '',
    cards: []
  }
}

const removeCardUsage = (index: number) => {
  cardList.value.splice(index, 1)
}

const validateIp = (rule: any, value: string, callback: any) => {
  const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/
  if (!value) {
    callback(new Error('请输入IP地址'))
  } else if (!ipv4Regex.test(value)) {
    callback(new Error('请输入正确的IPv4格式'))
  } else {
    const parts = value.split('.')
    const isValid = parts.every(part => {
      const num = parseInt(part)
      return num >= 0 && num <= 255
    })
    if (!isValid) {
      callback(new Error('IP地址的每个部分必须在0-255之间'))
    } else {
      // 检查是否重复
      const isDuplicate = servers.value.some(server => 
        server.ip === value && (!isEdit.value || server.id !== form.value.id)
      )
      if (isDuplicate) {
        callback(new Error('该IP地址已存在'))
      } else {
        callback()
      }
    }
  }
}

const rules = {
  ip: [
    { required: true, message: '请输入IP地址', trigger: 'blur' },
    { validator: validateIp, trigger: 'blur' }
  ],
  user_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  dev_type: [{ required: true, message: '请选择设备类型', trigger: 'change' }]
}

const filteredServers = computed(() => {
  if (!searchQuery.value) return servers.value
  const query = searchQuery.value.toLowerCase()
  return servers.value.filter(server => 
    server.ip.toLowerCase().includes(query) ||
    server.dev_name.toLowerCase().includes(query) ||
    server.location.toLowerCase().includes(query) ||
    server.asset_number.toLowerCase().includes(query) ||
    server.rfid.toLowerCase().includes(query) ||
    Object.entries(server.user_cards).some(([key, cards]) => 
      key.toLowerCase().includes(query) || 
      cards.some(card => card.toLowerCase().includes(query))
    )
  )
})

const formatDateTime = (dateTime: string) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  })
}

const loadServers = async () => {
  try {
    const response = await serverApi.getServers()
    servers.value = response.data
  } catch (error) {
    ElMessage.error('加载服务器列表失败')
  }
}

const handleSearch = () => {
  // 搜索逻辑已通过计算属性实现
}

const showCreateDialog = () => {
  isEdit.value = false
  form.value = {
    ip: '',
    user_name: '',
    password: '',
    dev_type: '',
    dev_name: '',
    server_room: '',
    server_rack: '',
    pos_u: '',
    location: '',
    asset_number: '',
    serial_number: '',
    rfid: '',
    user_cards: [],
    remark: ''
  }
  cardList.value = []
  cardForm.value = {
    name: '',
    reason: '',
    cards: []
  }
  dialogVisible.value = true
}

const handleEdit = (row: Server) => {
  isEdit.value = true
  form.value = { ...row }
  if (row.dev_type === 'Ascend') {
    cardList.value = [...row.user_cards]
  } else {
    cardList.value = []
  }
  dialogVisible.value = true
}

const handleDelete = async (row: Server) => {
  try {
    await ElMessageBox.confirm('确定要删除这个设备吗？', '警告', {
      type: 'warning'
    })
    await serverApi.deleteServer(row.id!)
    ElMessage.success('删除成功')
    loadServers()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      try {
        if (form.value.dev_type === 'Ascend') {
          form.value.user_cards = [...cardList.value]
        }

        if (isEdit.value) {
          await serverApi.updateServer(form.value.id!, form.value)
          ElMessage.success('更新成功')
        } else {
          await serverApi.createServer(form.value as Server)
          ElMessage.success('创建成功')
        }
        dialogVisible.value = false
        loadServers()
      } catch (error) {
        ElMessage.error(isEdit.value ? '更新失败' : '创建失败')
      }
    }
  })
}

const showDetailDialog = (row: Server) => {
  currentServer.value = row
  detailDialogVisible.value = true
}

const connectingIds = ref<number[]>([])

const handleConnect = async (row: Server) => {
  if (!row.id) return
  connectingIds.value.push(row.id)
  
  const loadingMessage = ElMessage({
    message: `${row.ip} 正在连接...`,
    duration: 0,
    type: 'info',
    customClass: 'table-message'
  })
  
  try {
    const response = await axios.post(`${BASE_URL}/ascend-servers/connect/${row.id}`)
    loadingMessage.close()
    if (response.data.success) {
      ElMessage({
        message: `${row.ip} 连接成功`,
        type: 'success',
        customClass: 'table-message'
      })
    } else {
      ElMessage({
        message: `${row.ip} 连接失败：${response.data.message || '未知错误'}`,
        type: 'error',
        customClass: 'table-message'
      })
    }
  } catch (error) {
    loadingMessage.close()
    ElMessage({
      message: `${row.ip} 连接失败`,
      type: 'error',
      customClass: 'table-message'
    })
  } finally {
    connectingIds.value = connectingIds.value.filter(id => id !== row.id)
  }
}

onMounted(() => {
  loadServers()
  handleResize()
})
</script>

<style scoped>
.main-container {
  display: flex;
  height: 100vh;
  background-color: #f5f7fa;
}

.nav-menu {
  width: 64px;
  height: 100px;
  border-right: solid 1px #e6e6e6;
  background-color: #fff;
  transition: width 0.3s;
}

:deep(.el-menu--collapse) {
  width: 64px;
}

:deep(.el-menu-item) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  height: auto;
  min-height: 50px;
  line-height: 1.5;
}

:deep(.el-menu-item .el-icon) {
  margin: 0;
  font-size: 20px;
}

:deep(.el-menu-item.is-active) {
  background-color: var(--el-menu-hover-bg-color);
}

:deep(.el-menu-item span) {
  display: none;
  padding: 12px 0;
}

.nav-menu:hover :deep(.el-menu-item span) {
  display: inline-block;
  margin-left: 8px;
}

.nav-menu:hover :deep(.el-menu-item) {
  justify-content: flex-start;
  padding-left: 20px !important;
}

.content-container {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.server-list {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 100%;
  overflow-x: auto;
}

.optical-module-container {
  height: 100%;
}

.search-bar {
  margin-bottom: 20px;
  margin-right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.page-title {
  margin-left: 20px;
  font-size: 20px;
  font-weight: 500;
  color: #409EFF;
  font-weight: bold;
}

.search-input {
  width: 300px;
  min-width: 200px;
}

.table-container {
  margin-left: 20px;
  margin-right: 20px;
}

.mx-1 {
  margin: 0 4px;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  width: 100% !important;
}

:deep(.el-table__header) {
  background-color: #f5f7fa;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

:deep(.el-table__cell) {
  border-left: none !important;
  border-right: none !important;
}

:deep(.el-table__header-wrapper) {
  border-bottom: 1px solid var(--el-border-color);
}

:deep(.el-table__body-wrapper) {
  border-top: 1px solid var(--el-border-color);
}

:deep(.el-descriptions__label) {
  width: 120px;
  justify-content: flex-end;
}

@media screen and (max-width: 768px) {
  .server-list {
    padding: 10px;
  }

  .search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input {
    width: 100%;
  }

  .el-descriptions-item__label {
    width: 100px;
  }

  :deep(.el-table) {
    font-size: 12px;
  }

  :deep(.el-button--small) {
    padding: 5px 10px;
  }
}

.card-form {
  margin-bottom: 20px;
}

.card-list {
  margin-top: 20px;
}

.update-time {
  text-align: right;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.detail-dialog {
  :deep(.el-dialog__body) {
    padding: 10px 20px;
  }
}

.detail-form {
  padding: 10px;
  background-color: #fff;
}

.detail-content {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 15px;
  display: inline-block;
  min-width: 200px;
  max-width: 100%;
  background-color: #f5f7fa;
  height: 32px;
  line-height: 32px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-content-wrap {
  height: auto;
  min-height: 32px;
  line-height: 1.5;
  padding: 8px 15px;
  white-space: normal;
  word-break: break-all;
}

@media screen and (max-width: 768px) {
  .detail-form {
    padding: 5px;
  }
  
  :deep(.el-form-item__label) {
    width: 100px !important;
  }
  
  .detail-content {
    min-width: 150px;
  }
}

.table-footer {
  margin-top: 10px;
  text-align: right;
  color: #606266;
  font-size: 14px;
}

.ml-4 {
  margin-left: 16px;
}

:deep(.table-message) {
  position: absolute;
  bottom: 60px;
  right: 20px;
  z-index: 2000;
}
</style> 